// pic组件实现
window.add_pic = function(x, y, w, h, borderRadius, borderColor, url, hide, tag, callback, divid) {
    // 确保参数有默认值
    x = x || 100;
    y = y || 100;
    w = w || 200;
    h = h || 200;
    borderRadius = borderRadius || 0;
    borderColor = borderColor || '';
    url = url || '';
    hide = hide || false;
    tag = tag || '';
    callback = typeof callback === 'function' ? callback : null;
    divid = divid || false;
    
    // 生成唯一ID
    const id = 'pic_' + Date.now() + '_' + Math.floor(Math.random() * 10000);
    
    // 创建图片元素
    const pic = document.createElement('div');
    pic.id = id;
    
    // 设置样式
    pic.style.position = 'absolute';
    pic.style.left = x + 'px';
    pic.style.top = y + 'px';
    pic.style.width = w + 'px';
    pic.style.height = h + 'px';
    pic.style.backgroundImage = `url(${url})`;
    pic.style.backgroundSize = 'cover';
    pic.style.backgroundPosition = 'center';
    pic.style.borderRadius = borderRadius + 'px';
    if (borderColor) pic.style.border = `1px solid ${borderColor}`;
    
    // 附加样式和标记
    if (hide) pic.style.display = 'none';
    if (tag) pic.setAttribute('data-tag', tag);
    
    // 事件处理
    pic.onmousemove = function(e) { 
        console.log('pic mousemove:', id);
        handleEvent('pic', id, 0, url, tag, e.clientX, e.clientY, null, callback, divid); 
    };
    pic.onclick = function(e) { 
        console.log('pic click:', id);
        handleEvent('pic', id, 1, url, tag, e.clientX, e.clientY, null, callback, divid); 
    };
    pic.oncontextmenu = function(e) { 
        e.preventDefault(); 
        console.log('pic contextmenu:', id);
        handleEvent('pic', id, 2, url, tag, e.clientX, e.clientY, null, callback, divid); 
        return false; 
    };
    pic.onmouseover = function(e) { 
        console.log('pic mouseover:', id);
        handleEvent('pic', id, 5, url, tag, e.clientX, e.clientY, null, callback, divid); 
    };
    pic.onmouseout = function(e) { 
        console.log('pic mouseout:', id);
        handleEvent('pic', id, 6, url, tag, e.clientX, e.clientY, null, callback, divid); 
    };
    pic.onkeydown = function(e) { 
        console.log('pic keydown:', id);
        handleEvent('pic', id, 3, url, tag, 0, 0, e.key, callback, divid); 
    };
    pic.onkeyup = function(e) { 
        console.log('pic keyup:', id);
        handleEvent('pic', id, 4, url, tag, 0, 0, e.key, callback, divid); 
    };
    
    // 添加到页面或指定父div
    console.log(divid)
    const parent = divid ? document.getElementById(divid) : document.body;
    if (!parent) {
        console.error('Parent element not found for pic:', id);
        return null;
    }
    
    parent.appendChild(pic);
    console.log('Adding pic to parent:', parent.id || 'body');
    console.log('Pic URL:', url);
    console.log('Pic added successfully:', id);
    
    // 初始化pics存储空间
    if (!elementStore.pics) {
        elementStore.pics = {};
    }
    
    // 存储引用
    elementStore.pics[id] = pic;
    
    return id;
}

window.del_pic = function(id) {
    if (elementStore.pics[id]) {
        elementStore.pics[id].remove();
        delete elementStore.pics[id];
    }
}

window.upd_pic = function(id, x, y, w, h, borderRadius, borderColor, url, hide) {
    const pic = elementStore.pics[id];
    if (pic) {
        if (x !== undefined) pic.style.left = x + 'px';
        if (y !== undefined) pic.style.top = y + 'px';
        if (w !== undefined) pic.style.width = w + 'px';
        if (h !== undefined) pic.style.height = h + 'px';
        if (borderRadius !== undefined) pic.style.borderRadius = borderRadius + 'px';
        if (borderColor !== undefined) pic.style.border = borderColor ? `1px solid ${borderColor}` : 'none';
        if (url !== undefined) {
            pic.style.backgroundImage = `url(${url})`;
            pic.setAttribute('data-title', url);
        }
        if (hide !== undefined) pic.style.display = hide ? 'none' : 'block';
    }
}